<template>
  权限管理
  <el-button plain @click="open(null)" type="success">新增</el-button>

  <el-dialog v-model="islogin.isopen" :title="islogin.titles" width="500">
    <el-form :model="form">
      <el-form-item label="权限名称">
        <el-input v-model="form.permissionsName" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="add" v-if="islogin.isadd == true">添加</el-button>
        <el-button @click="add" v-if="islogin.isadd == false">修改</el-button>
        <el-button type="primary" @click="islogin.isopen = false">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="permissionId" label="权限编号" align="center" />
    <el-table-column prop="permissionsName" label="权限描述" align="center" />
    <el-table-column prop="address" label="操作">
      <template v-slot="scope">
        <el-button type="success" @click="open(scope.row)">修改</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang='ts'>
//引入组件
import { ref, reactive, onMounted } from 'vue'
import { apiInstance1 } from '@/services/api'

import { ElMessage } from 'element-plus';

//获取逻辑字段
const islogin = reactive({
  isadd: true,
  isopen: false,
  titles: "角色信息新增"
})
//权限字段
const form = reactive({
  permissionsId: 0,
  permissionsName: ""
})
//是否打开
const open = (row: any) => {
  islogin.isopen = true
  if (row == null) {
    islogin.isadd = true
    islogin.titles = "角色信息新增"

    form.permissionsId = 0
    form.permissionsName = ""
  } else {
    islogin.titles = "角色信息修改"
    islogin.isadd = false

    form.permissionsId = row.permissionId
    form.permissionsName = row.permissionsName
  }
}

//角色信息添加
const add = () => {
  if (islogin.isadd == true) {
    apiInstance1.post('/api/Permis/CreatePermisInfo', form).then(res => {
      ElMessage.success(res.data.message)
      islogin.isopen = false
      getpermisList()
    })
  } else {
    apiInstance1.put('/api/Permis/UpdatePermis', form).then(res => {
      if (res.data.code == 200) {
        ElMessage.success(res.data.message)
        islogin.isopen = false
        getpermisList()
      }
    })
  }
}

//获取角色信息
const tableData = ref([])

//请求数据
const getpermisList = async () => {
  apiInstance1.get('/api/Permis/GetPermisList').then(res => {
    tableData.value = res.data
  })
}

onMounted(() => {
  getpermisList()
})


</script>

<style></style>
